<template>
  <div>
    <div class="bag" v-for="item in redBag" :key="item.id">
      <div class="one">￥{{item.amount}}</div>
      <div class="two">
      <h6>{{item.name}}</h6>
      <p>{{item.kind}}</p>
      <p>{{item.people}}</p>
      <p>有效期：{{item.time}}</p>
      </div>
      <div class="three">
          <h6>{{item.soon}}</h6>
          <p><button>去使用</button></p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      redBag: [
        {
          id: 1,
          name: "8元消费红包",
          kind: "全种类红包",
          time: "2021.09.5-2022.1.1",
          amount: 8,
          people: "会员非会员通用",
          soon: "有效",
        },
        {
          id: 2,
          name: "15元消费红包",
          kind: "全种类红包",
          time: "2021.09.5-2022.1.1",
          amount: 15,
          people: "会员非会员通用",
          soon: "即将到期",
        },
      ],
    };
  },
  methods: {
    
  },
};
</script>

<style scoped>

.bag {
  width: 100vw;
  height: 17vh;
  /* background: cyan; */
  border-bottom: 1px solid #eee;
  display: flex;
 
}
.one{
    width: 20vw;
    height: 17vh;
    /* background: deeppink; */
    font-size: 3vh;
    line-height: 17vh;
    color: #1e83e9;
    margin-left: 4vw;
}
.two{
    width: 60vw;
    height: 17vh;
    /* background: fuchsia; */
    line-height: 4vh;
}
.two h6{
    margin-top: 1.5vh;
}
.two p{
    color: gray;
    font-size: 1vh;
}
.three{
    width: 20vw;
    height: 17vh;
    /* background: gold; */
}
.three h6{
    color: red;
    font-weight: normal;
    margin-top: 1.5vh;
}
.three button{
    background: #1e83e9;
   margin-top: 9vh;
   border: none;
   color: #fff;
   width: 15vw;
   height: 3vh;
   font-size: 1.5vh;
}
</style>